import React from 'react'
import ReactDOM from 'react-dom'
import './css/tplList_cll1.css'


class TplList extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      
    }
  }
  theme = 'default';
  tpl = ''
  boxW=300
  config = {
    width:  document.documentElement.clientWidth  || document.body.clientWidth,
    tplType : 'file', 
    title : null,
    time : null, 
  }
  componentWillMount = () => { 
      if(this.props.theme !== undefined) this.theme = this.props.theme; 
      if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config);
  }
  componentDidMount = () => {
      this.boxW = document.documentElement.clientWidth  || document.body.clientWidth; 
  }
  /**
   * 点击事件
   */
  listClick = (item) => {
    if(!!this.props.listClick) {
        this.props.listClick(item);
    }
  }
  render () {
      if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config);
      let {data} = this.props;
      let partw=20;
       partw = (this.config.img == null) ? partw:  partw+parseInt(this.config.img.style.width.substring(0,this.config.img.style.width.length-2));//左边图标
       partw = (this.config.rightImg == null) ? partw: partw+ parseInt(this.config.rightImg.style.width.substring(0,this.config.rightImg.style.width.length-2));//右边图标
       partw = (this.config.rightCon == null) ? partw: partw+ parseInt(this.config.rightCon.style.width.substring(0,this.config.rightCon.style.width.length-2));//右边内容
       
    return (
      <div className = {'tplList ' + this.theme}>
        {
            data.map((item,i) => {
                let imgW = (this.config.img == null) ? 'all' : 'part';
                let right = '';
                if (!!this.config.rightImg) { 
                  imgW += '_right_icon'; 
                  right = <div style = {this.config.rightImg.style}><img src = {item[this.config.rightImg.key]} /></div>
                }
                 let rightCon = '';
                if (!!this.config.rightCon) {   
                  rightCon = <div style = {this.config.rightCon.style}> {this.config.rightCon.rightTxt }</div>
                }
                let leftImg = (this.config.img == null) ? '' : <div className = 'img_wrap' style = {this.config.img.style}><img src = {item[this.config.img.key]} /></div>;
                let title = (this.config.title == null) ? '' : <div className = 'textLine' style = {this.config.title.style}>{item[this.config.title.key]}</div>;
                let time = (this.config.time == null) ? '' : <div className = 'textLine' style = {this.config.time.style}>{item[this.config.time.key]}</div>
                let tpl = <div className = 'list' onClick = {() => this.listClick(item)}>
                                { leftImg }
                                 <div className = {'text_wrap_' + imgW} style={{width:  this.config.width-partw}}>
                                    { title }
                                    { time }
                                </div>
                                {rightCon} 
                                { right }
                            </div>
                return <div>{tpl}</div>
            })
        }
      </div>
    )
  }
}

export default TplList